<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>输入框和文本框内容同步</title>
</head>
<body>
<div id="change" class="change">
    <form action="">
        <label for="name">姓名</label><input type="text" name="name" id="name">
        <label id="content"></label>
        <!--<div></div>-->
    </form>
</div>

<script !src="">
    // step1 获取页面中的目标元素
    let element_input = document.querySelector("#change #name");
    let element_show = document.querySelector("#change #content");

    // ste2 处理输入框内容发生变化的情况
    element_input.addEventListener(
        "input",
        function (event) {
            /*
            // 输出输入框中的内容
            console.log(element_input.value);
            */
            element_show.innerText = element_input.value
        }
    )
</script>
</body>
</html>